<template>
    <el-card class="box-card m_t_15" shadow="hover">
        <div slot="header" class="title">经典案例</div>
        <div class="" style="padding-bottom: 20px;">
            <ul class="news_list item_flex_ul">
                <li v-for="item in list" :key="item.id" @click="StartCase(item.id)">
                    <span class="title">· {{item.name}}</span>
                </li>
            </ul>
            <!-- <div class="item" v-for="item in list" @click="StartCase(item.id)">
                <el-avatar shape="square" class="avatar square-avatar" :src="item.avatar" />
                <div class="course_body text-l">
                    <p class="title">{{item.name}}</p>
                    <p class="p_top">{{item.introduction}}</p>
                </div>
            </div> -->
        </div>
        <el-pagination @size-change="sizeChange" @current-change="pageChange" :current-page="page.page" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size="page.size" :layout="PAGE_LAYOUT" :total="page.total"></el-pagination>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            page: { page: 1, size: 10, total: 0 },
            list: [
                { id: '1', name: '利用空椅技术帮助中度抑郁来访者', introduction: '利用空椅技术帮助中度抑郁来访者', avatar: 'https://img.ydlcdn.com/file/2020/04/21/2onpzpz8uoc8jbe8.jpg!s120x75' },
                { id: '2', name: '我想戒掉游戏瘾', introduction: '我想戒掉游戏瘾', avatar: 'https://img.ydlcdn.com/file/2020/04/17/7yu9reg8p638t6dd.png!s120x75' },
                { id: '3', name: '从逃避学习到爱上学习', introduction: '从逃避学习到爱上学习', avatar: 'https://img.ydlcdn.com/file/2020/04/17/950f8q9p2k8tdmap.jpg!s120x75' },
                { id: '4', name: '学习变成了“紧箍咒”，带来严厉，也带来了沉默', introduction: '学习变成了“紧箍咒”，带来严厉，也带来了沉默', avatar: 'https://img.ydlcdn.com/file/2020/04/10/09ysylxz8bizc5ta.jpg!s120x75' }
            ]
        };
    },
    created() {},
    mounted() {
        
    },
    methods: {
        sizeChange() {},
        pageChange() {},
        StartCase(id) {
            this.$router.push({ path: '/LearningHome/Psychological/StartCase', query: { id } });
        }
    }
};
</script>

<style>
</style>